const layer = layui.layer

const form = layui.form

const query = {
    catename: '',
    page: 1,
    limit: 10,
    icon: '',
}

// 右上角图标 隐藏和显示
let flag = true
$('#hide').click(() => {
    flag ? $('.cate-name').slideUp() : $('.cate-name').slideDown()
    $('#hide')[0].className = flag ? "iconfont icon-xiajiantou" : 'iconfont icon-shangjiantou'
    flag = !flag
})

// !<!--初始化插件-->
$("#export").click(function () {
    $("#tables").tableExport({
        type: "excel",
        escape: "false",
    });
});

// 渲染页面
async function getList() {
    // 发 axios 请求
    const res = await axios.get('/ydd_cate/list', { params: query })
    // console.log(res)

    // 获取到请求里的数组
    const listArr = res.data.data.data
    // console.log(listArr)

    // 获取到数据总数
    const total = res.data.data.count
    // console.log(total)

    // 渲染列表
    const render = listArr.map(({ catename, default_data, icon, id, sort_num }, index) => {
        return `
            <tr>
                <td>${index + 1}</td>
                <td>${id}</td>
                <td>${catename}</td>
                <td>${icon} <i class="fa ${icon}"></i></td>
                <td>${sort_num}</td>
                <td id="btn" style="text-align: center;">
                <button type="button" class="layui-btn layui-btn-xs btn_edit"
                    style="width: 30px; border-radius: 50%; padding: 0 8px; background-color: #1e9fff;" data-id="${id}">
                    <i class="layui-icon layui-icon-edit btn_edit" data-id="${id}"></i>
                </button>
                <button type="button" class="layui-btn layui-btn-danger layui-btn-x btn_delete" style="width: 30px; border-radius: 50%; padding: 0 8px;" data-index="${id}">
                    <i class="layui-icon layui-icon-delete btn_delete" data-index="${id}"></i>
                </button>
                </td>
            </tr>
        
        `
    }).join('')

    // 添加到页面上
    document.querySelector('#list').innerHTML = render

    // 获取到数据总数，渲染到分页里
    renderPage(total)
}
getList()

// todo ============================= 删除功能 ====================================

const list = document.querySelector('#list')

// 给动态获取的删除按钮 利用事件委托注册点击事件
list.addEventListener('click', function (e) {
    if (e.target.classList.contains('btn_delete')) {
        // alert(11)
        const id = e.target.dataset.index

        // console.log(id)

        axios.get('/ydd_cate/del', {
            params: {
                id
            }
        }).then(({ data }) => {
            console.log(data)
            layer.confirm('确认要删除么？', function (index) {
                //do something
                if (data.errmsg === "系统默认数据，不允许删除" && data.errno === 1000) {
                    return layer.msg(data.errmsg)
                }

                // 删除成功
                layer.msg('删除成功')

                // 关闭弹出层
                layer.close(index)

                // 重新渲染列表
                getList()
            })

        })

    }
})


// todo ========================== 编辑功能 =================================

const editFormStr = `
    <form id="editForm" class="layui-form" lay-filter="editForm">
        <!-- 存Id -->
        <div class="layui-form-item" style="display:none">
            <label class="layui-form-label">id</label>
            <div class="layui-input-block">
                <input type="text" name="id" required lay-verify="required" placeholder="请输入分类名" autocomplete="off"
            class="layui-input" style="width:575px; height:30px ">
            </div>
        </div>
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item" style="margin-top:30px ">
            <label class="layui-form-label" style="font-size:14px "><strong>分类名称</strong></label>
            <div class="layui-input-block">
                <input type="text" name="catename" required lay-verify="required" placeholder="请输入分类名" autocomplete="off"
                class="layui-input" style="width:400px; height:30px; margin-top:8px">
            </div>
        </div>
        <!-- 第二行 图标class  -->
        <div class="layui-form-item">
            <label class="layui-form-label" style="font-size:14px "><strong>图标class</strong></label>
            <div class="layui-input-block">
                <input type="text" id="txt" name="icon" required lay-verify="required" placeholder="请输入class名" autocomplete="off"
                class="layui-input" style="width:200px; height:30px; display:inline-block ">
                <i class="fa " id="icon"></i>
                <a href="https://fontawesome.com.cn/v4/icons-ui/" style="margin-left:40px; color:#64666a; text-decoration: none; " target="_blank">具体参见fontawesome图标库</span></a>
            </div>
        </div>
        <!-- 第三行 排序大小  -->
        <div class="layui-form-item">
            <label class="layui-form-label" style="font-size:14px "><strong>排序大小</strong></label>
            <div class="layui-input-block">
                <input type="text" name="sort_num" required lay-verify="required"  autocomplete="off"
                class="layui-input" style="width:200px; height:30px ">
            </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" style="width:65px; height:30px; margin-left:335px ">确定修改</button>
            </div>
        </div>
    </form>

`

let EditForm
list.addEventListener('click', function (e) {

    if (e.target.classList.contains('btn_edit')) {

        // 获取 id 
        const id = e.target.dataset.id
        // console.log(id)

        axios.get('/ydd_cate/rowInfo', { params: { id } }).then((res) => {
            console.log(res)

            // const icon = res.data.data.icon

            // console.log(icon)
            // 编辑弹出层
            EditForm = layer.open({
                content: editFormStr,   // 内容
                type: 1,   // 页面层
                title: '修改分类',  // 标题
                area: ['650px', '350px'], // 宽高 
            })

            // 获取到表单的值  传入到 form 表单里
            form.val('editForm', res.data.data)

            // 添加弹出层的字体图标
            let ico = $('#txt').val()
            // console.log(ico)
            if (!ico.startsWith('fa-')) {
                ico = "fa-" + ico
            }

            $('#icon').addClass(ico)
        })

    }

})

// 利用事件委托 注册提交事件
$('body').on('submit', '#editForm', function (e) {
    // 阻止表单的默认提交行为
    e.preventDefault()

    // 获取到表单的值
    const data = $(this).serialize()

    // 发送 post 请求
    axios.post('/ydd_cate/update', data)
        .then(({ data }) => {
            console.log(data)
            if (data.errno !== 0) {
                // 失败提示
                return layer.msg('修改失败')
            }

            // 成功提示
            layer.msg('修改成功')

            // 关闭弹出层
            layer.close(EditForm)
        })
    // 重新获取所有的分类渲染展示到页面中
    getList()
})


// todo ========================= 新增功能 ===================================
// 准备数据
const addFormStr = `
    <form id="addForm" class="layui-form">
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item" style="margin-top:30px ">
            <label class="layui-form-label" style="font-size:14px "><strong>分类名称</strong></label>
            <div class="layui-input-block">
                <input type="text" name="catename" required lay-verify="required" placeholder="请输入分类名" autocomplete="off"
                class="layui-input" style="width:600px; height:30px; margin-top:8px">
            </div>
        </div>
        <!-- 第二行 图标class  -->
        <div class="layui-form-item">
            <label class="layui-form-label" style="font-size:14px "><strong>图标class</strong></label>
            <div class="layui-input-block">
                <input type="text" name="icon" required lay-verify="required" placeholder="请输入class名" autocomplete="off"
                class="layui-input" style="width:400px; height:30px; display:inline-block ">
                <a href="https://fontawesome.com.cn/v4/icons-ui/" style="margin-left:40px; color:#64666a; text-decoration: none; " target="_blank">具体参见fontawesome图标库</span></a>
            </div>
        </div>
        <!-- 第三行 排序大小  -->
        <div class="layui-form-item">
            <label class="layui-form-label" style="font-size:14px "><strong>排序大小</strong></label>
            <div class="layui-input-block">
                <input type="text" name="sort_num" required lay-verify="required"  autocomplete="off"
                class="layui-input" style="width:200px; height:30px ">
            </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" style="width:65px; height:30px; margin-left:450px ">添加</button>
                <button class="layui-btn" id="chanelBtn" style="width:65px; height:30px " type="button">取消</button>
            </div>
        </div>
    </form>
`



const addBtn = document.querySelector('#addBtn')

let AddForm
addBtn.addEventListener('click', function (e) {

    // 阻止默认提交行为
    e.preventDefault()
    // alert(11)
    AddForm = layer.open({
        content: addFormStr,   // 内容
        type: 1,   // 页面层
        title: '添加文章类别',  // 标题
        area: ['750px', '350px'], // 宽高
    })
})

$('body').on('submit', '#addForm', function (e) {
    // 阻止表单的默认提交行为
    e.preventDefault()

    // 获取到表单数据
    const data = $(this).serialize()

    axios.post('/ydd_cate/add', data).then(({ data }) => {
        console.log(data)
        if (data.errno !== 0) {
            // 新增失败提示
            return layer.msg('添加失败')
        }

        // 关闭弹出层
        layer.close(AddForm)

        // 新增成功提示
        layer.msg('添加成功')

        // 重新获取所有的分类渲染展示到页面中
        getList()

    })
})

// 取消按钮 关闭弹出层
document.querySelector('body').addEventListener('click', function (e) {
    if (e.target.id === 'chanelBtn') {
        layer.close(AddForm)
    }
})


// todo =========================== 搜索功能 =================================

const searchIpt = document.querySelector('#searchIpt')
const searchBtn = document.querySelector('#searchBtn')

searchBtn.addEventListener('click', function () {
    // 获取到输入框的值
    const value = searchIpt.value.trim()
    // console.log(value)
    query.catename = value

    // 渲染到页面
    getList()
})


// todo ============================== 重置功能 ==============================

const resetBtn = document.querySelector('#resetBtn')

// 点击重置按钮，重置页面
resetBtn.addEventListener('click', function () {
    query.catename = '',

        // 清空 input 输入框
        searchIpt.value = '',

        // 渲染页面
        getList()
})


// todo ========================== 添加分页功能 ============================
const laypage = layui.laypage

function renderPage(total) {
    // console.log(query.limit)
    laypage.render({
        elem: 'page-box', // 目标对象
        count: total, // 数据总数，从服务端得到
        curr: query.page,
        limit: query.limit,
        limits: [10, 20, 40, 50, 100], // 分页下拉框数据
        theme: '#409eff',
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],  // 自定义排版
        jump: function (obj, first) {
            // obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); // 得到每页显示的条数

            query.page = obj.curr
            query.limit = obj.limit

            // 首次不执行
            if (!first) {
                //do something
                getList()
            }
        }
    })
}